<template lang="pug">
.cp-materiel-list
  el-dialog.ml-dialog(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    width="60%")
    //- 查询
    el-form.ml-search(:inline="true")
      el-form-item
        el-input(
          v-model="materielName",
          placeholder="名称拼音首字母/编号/代码",
          style="width: 200px")
      el-form-item(label="物料类别 : ")
        el-select(v-model="skuCategory", placeholder="请选择", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(
            v-for="(item, index) in cateGorySelectAll",
            :key="index", :label="item.name",
            :value="item.value")
      el-form-item(label="物料分级 : ")
        el-select(v-model="skuGrade", placeholder="请选择", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(
            v-for="(item, index) in gradeSelectAll",
            :key="index", :label="item.name",
            :value="item.value")
      el-form-item(label="物料属性 : ")
        el-select(v-model="skuProperty", placeholder="请选择", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(
            v-for="(item, index) in propertySelectAll",
            :key="index", :label="item.name",
            :value="item.value")
      el-form-item(label="状态 : ")
        el-select(v-model="skuStatus", placeholder="请选择", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(
            v-for="(item, index) in statusSelectAll",
            :key="index", :label="item.name",
            :value="item.value")
      el-form-item
        el-button(type="primary", @click="searchMateriels") 搜索
    //- 列表
    .ml-table
      el-table(
        :data="materielList",
        highlight-current-row
        height="398px"
        size="mini"
        @current-change="handleCurrentChange"
        @row-dblclick="dbClickMaterielRow"
        v-loading="loadingMateriels")
        el-table-column(align="center", label="物料编码")
          template(slot-scope="scope")
            el-tooltip(
              effect="dark"
              placement="top"
              :content="scope.row.skuId")
              div.cell.el-tooltip(style="padding: 0") {{scope.row.skuId}}
        el-table-column(align="center", show-overflow-tooltip, prop="skuName", label="名称")
        el-table-column(align="center", show-overflow-tooltip, label="仓位")
          template(slot-scope="scope")
            span {{scope.row.storageSite | compare-list(siteSelect)}}
        el-table-column(align="center", show-overflow-tooltip, prop="batchNo", label="批号")
        el-table-column(align="center", show-overflow-tooltip, prop="quantity", label="库存总数")
        el-table-column(align="center", show-overflow-tooltip, label="生产日期")
          template(slot-scope="scope")
            span {{ scope.row.prodDate | day-format }}
    //- 分页
    el-pagination.ml-pagination(
      layout="total, prev, pager, next, jumper",
      @current-change="changeMaterielPage",
      :current-page.sync="pageNum",
      :page-size="pageSize",
      :background="true",
      :total="materielListTotal")
    div(slot="footer", style="text-align: center;")
      el-button(type="primary", plain, @click="closeDialog", v-text="'取消'")
      el-button(type="primary", style="margin-left: 40px;", @click="emitMateriel", v-text="'确定'")
</template>

<script>
import { mapGetters } from 'vuex';
import ManApi from '@/api/manage';

export default {
  name: 'materiellist',
  props: {
    title: {
      type: String,
      default: '选择物料'
    },
    visible: Boolean,
    storehouse: {
      type: String
    },
    siteSelect: {
      type: Array
    }
  },
  data() {
    return {
      materielName: null,
      skuCategory: null,
      skuGrade: null,
      skuProperty: null,
      skuStatus: null,
      // 列表
      materielList: [],
      materielListTotal: 1,
      pageNum: 1,
      pageSize: 10,
      loadingMateriels: true,
      // 选择的物料
      currentRow: null,
      // 搜索条件选项
      statusSelectAll: [{ name: '启用', value: '0' }, { name: '禁用', value: '1' }]
    };
  },
  computed: {
    ...mapGetters({
      cateGorySelectAll: 'skuTypeSelect',
      propertySelectAll: 'skuPropSelect',
      gradeSelectAll: 'skuLevelSelect',
      manufacturerSelectAll: 'skuManSelect'
    })
  },
  watch: {
    storehouse (newData, oldData) {
      if (newData !== oldData) {
        this.loadingList();
      }
    }
  },
  methods: {
    closeDialog () {
      this.$emit('close');
    },
    // 整理参数
    filterParams () {
      const params = {
        storehouseId: this.storehouse,
        name: this.materielName,
        skuCategory: this.skuCategory,
        skuGrade: this.skuGrade,
        skuProperty: this.skuProperty,
        skuStatus: this.skuStatus,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      for (const key in params) {
        if (params[key] === null || params[key] === '' || params[key] === undefined) {
          delete params[key];
        }
      }
      return params;
    },
    // 获取列表数据
    loadingList () {
      const params = this.filterParams();
      if (!params.storehouseId) {
        return false;
      }
      this.loadingMateriels = true;
      ManApi.getMaterielOutList(params).then((result) => {
        this.materielList = result.records;
        this.materielListTotal = result.totalNum;
        this.loadingMateriels = false;
      }).catch((error) => {
        this.loadingMateriels = false;
        console.log(JSON.stringify(error));
      });
    },
    // 搜索
    searchMateriels () {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadingList();
    },
    // 分页
    changeMaterielPage (pageNum) {
      this.pageNum = pageNum;
      this.loadingList();
    },
    // 监听对Materiel列表操作事件
    dbClickMaterielRow (row) {
      this.currentRow = row;
      this.emitMateriel();
    },
    // 监听选择行
    handleCurrentChange (row) {
      this.currentRow = row;
    },
    // 确定选择
    emitMateriel () {
      if (this.currentRow) {
        this.$emit('submit', this.currentRow);
      } else {
        this.$message({ type: 'info', message: '请选择物料' });
      }
    }
  },
  mounted () {
    // 取得物料表
    this.loadingList();
  }
};
</script>

<style lang="sass">
.cp-materiel-list
  .ml-dialog
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 16px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .ml-search
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
      margin-bottom: 10px
    .el-form-item__label
      padding-right: 6px
  .ml-table
    margin-bottom: 12px
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
      th.gutter
        display: table-cell!important
  .ml-pagination
    text-align: center
</style>
